<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../css/BorrowingDetail.css" />
    <script src="../utils/jquery-3.6.0.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="main-box">
      <!-- 左边导航 -->
      <div class="left">
        <!-- logo -->
        <div class="logo">
          <img src="../images/logo.png" alt="" />
          <h5>数字化档案管理</h5>
        </div>

        <!-- 导航 -->
        <div class="left-nav">
          <ul class="nav nav-pills nav-stacked">
            <li><a href="JavaScript:;" class="active">首界面</a></li>
            <li>
              <a href="JavaScript:;">案卷管理</a>

              <ul class="min-nav">
                <li><a href="JavaScript:;">签收管理</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">库房管理</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">库房信息</a></li>
                <li><a href="JavaScript:;">库架信息</a></li>
                <li><a href="JavaScript:;">层格信息</a></li>
                <li><a href="JavaScript:;">盒子信息</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">入库管理</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">档案入库</a></li>
                <li><a href="JavaScript:;">入库记录</a></li>
                <li><a href="JavaScript:;">盒号打印</a></li>
                <li><a href="JavaScript:;">档案号打印</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">档案管理</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">退/还案管理</a></li>
                <li><a href="JavaScript:;">退/还案明细</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">移库管理</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">档案移库</a></li>
                <li><a href="JavaScript:;">移库明细</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">档案影像</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">影像查询</a></li>
                <li><a href="JavaScript:;">影像录入</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">实体借阅</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">借阅申请</a></li>
                <li><a href="JavaScript:;">借阅审批</a></li>
                <li><a href="JavaScript:;">借阅出库</a></li>
                <li><a href="JavaScript:;">借阅归还</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">电子借阅</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">借阅申请</a></li>
                <li><a href="JavaScript:;">借阅审批</a></li>
                <li><a href="JavaScript:;">借阅明细</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">统计报表</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">签收统计</a></li>
                <li><a href="JavaScript:;">入库统计</a></li>
                <li><a href="JavaScript:;">电子借阅统计</a></li>
                <li><a href="JavaScript:;">实体借阅统计</a></li>
                <li><a href="JavaScript:;">档案库存数统计</a></li>
                <li><a href="JavaScript:;">档案状态统计</a></li>
                <li><a href="JavaScript:;">用户登录统计</a></li>
                <li><a href="JavaScript:;">影像上传统计</a></li>
                <li><a href="JavaScript:;">影像浏览统计</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">日志管理</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">系统操作日志</a></li>
                <li><a href="JavaScript:;">影像浏览日志</a></li>
                <li><a href="JavaScript:;">影像上传日志</a></li>
                <li><a href="JavaScript:;">用户登录日志</a></li>
              </ul>
            </li>

            <li>
              <a href="JavaScript:;">系统管理</a>
              <ul class="min-nav">
                <li><a href="JavaScript:;">用户管理</a></li>
                <li><a href="JavaScript:;">角色管理</a></li>
                <li><a href="JavaScript:;">等级管理</a></li>
                <li><a href="JavaScript:;">机构管理</a></li>
                <li><a href="JavaScript:;">流程管理</a></li>
                <li><a href="JavaScript:;">档案轨迹</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧部分 -->
      <div class="right">
        <!-- 右侧头部 -->
        <div class="right-header">
          <!-- 头部 -->
          <div class="row1">
            <div class="header-left">
              <img src="../images/1 copy.png" alt="" />
            </div>

            <div class="header-right">
              <img src="../images/block.png" alt="" />
              <div class="user">
                <!-- 头像 -->
                <img src="../images/u26.jpg" alt="" />
                <span>Admin</span>
              </div>
            </div>
          </div>

          <!-- 面包屑 -->
          <ul class="breadcrumb">
            <li><a href="#">电子借阅</a></li>
            <li><a href="active">借阅申请</a></li>
          </ul>
        </div>

        <!-- 右侧主体 -->
        <div class="right-body">
          <div class="right-content">
            <form class="form-inline">
              <div class="form-group">
                <label for="exampleInputName2">申请编号</label>
                <input
                  type="text"
                  class="form-control searchInp1"
                  id="exampleInputEmail2"
                  placeholder="请输入申请编号"
                />
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">收件编号</label>
                <input
                  type="text"
                  class="form-control searchInp2"
                  id="exampleInputEmail2"
                  placeholder="请输入收件编号"
                />
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">身份证号</label>
                <input
                  type="text"
                  class="form-control"
                  id="exampleInputEmail2"
                  placeholder="请输入身份证号码"
                />
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">借阅人姓名</label>
                <input
                  type="text"
                  class="form-control searchInp3"
                  id="exampleInputEmail2"
                  placeholder="请输入档案号"
                />
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">申请时间（起）</label>
                <input
                  type="text"
                  class="form-control searchInp4"
                  id="exampleInputEmail2"
                  placeholder="请输入日期"
                />
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">申请时间（止）</label>
                <input
                  type="text"
                  class="form-control"
                  id="exampleInputEmail2"
                  placeholder="请输入日期"
                />
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">审批结果</label>
                <select class="form-control">
                  <option>请选择</option>
                  <option>审批中</option>
                  <option>审批通过</option>
                  <option>审批驳回</option>
                </select>
              </div>
              <button type="submit" class="btn btn-default2 searchBtn">查询</button>
              <button type="submit" class="btn btn-default2">重置</button>
              <div class="border-bottom"></div>
              <div class="table1">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>申请编号</th>
                      <th>收件编号</th>
                      <th>借阅人姓名</th>
                      <th>申请日期</th>
                      <th>借阅天数</th>
                      <th>审批结果</th>
                      <th>备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- <tr>
                    <td>1</td>
                    <td>E202207050001</td>
                    <td>20220704003</td>
                    <td>王志勇</td>
                    <td>2022-7-4 17:14:12</td>
                    <td>2</td>
                    <td>审批中</td>
                    <td>备注说明展示</td>
                  </tr> -->
                  </tbody>
                </table>
              </div>
              <div>
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                    <li>
                      <a class="prev" href="#">
                        <span>&laquo;</span>
                      </a>
                    </li>
                    <!-- <li class='active'><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li> -->
                    <li>
                      <a class="next" href="#">
                        <span>&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </form>
          </div>
        </div>
      </div>
      <script src="../js/BorrowingDetail.js"></script>
    </div>
  </body>
</html>